<template>
    <div>
        <div class="tableHeadBox">
            <div class="buttonBox">
                <el-dropdown split-button type="primary">
                    当前楼栋：{{ myCurrentBuilding }}
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(item, index) in BuildingData" :key="index"
                                @click="changeBuilding(item.id, item.name)">{{ item.name }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <el-dropdown split-button type="primary">
                    当前楼层：{{ myCurrentFloor }}
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(item, index) in tableData" :key="index"
                                @click="changeFloor(item.id, item.name)">{{ item.name }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <el-button class="addButton" type="primary" size="small" @click="ClickAdd">添加教室</el-button>


            </div>
            <div class="searchBox">
                <el-input class="searchInput" v-model="searchStr" size="small" placeholder="请输入楼层"></el-input>
                <el-button class="searchButton" type="primary" size="small" :icon="Search">搜索</el-button>
            </div>
        </div>

        <!--#region 列表 -->
        <div class="tableBox">
            <el-table :data="filterTableData" height="100%" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="name" label="教室名"></el-table-column>
                <el-table-column prop="nubmer" label="教室号"></el-table-column>
                <el-table-column prop="admin.name" label="实验室管理员"></el-table-column>
                <el-table-column prop="admin.phone" label="管理员电话"></el-table-column>
                <!-- 按钮 -->
                <el-table-column fixed="right" label="操作" width="330">
                    <template #default="scope">
                        <el-button round type="primary" size="small"
                            @click="ClickEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button round type="danger" size="small"
                            @click="ClickDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- #endregion -->
    </div>

    <!--编辑/添加弹窗 -->
    <el-dialog :key="dialogKey" v-model="dialogVisible" :title="currentBuilding == null ? '添加学院' : '编辑学院'" width="1000"
        top="0vh" :close-on-press-escape="false">
        <LaboratoryForm :Close="Close" :isAdd="addForLB" :transmitObj="currentBuilding"></LaboratoryForm>
    </el-dialog>

</template>

<script setup>
import service from '@/request';
import '../assets/css/table.css'
import { Search } from '@element-plus/icons-vue'
import { reactive, ref, computed, onBeforeMount, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import LaboratoryForm from '@/components/Laboratory/LaboratoryForm.vue';

// #region 显示提示
async function ShowTip(isSuccess, msg) {
    if (isSuccess == true) {
        ElMessage({ message: msg, type: 'success' })
    }
    else {
        ElMessage({ message: msg, type: 'error' })
    }
}
//#endregion

//是否是添加
let addForLB = ref(0);

//当前楼楼栋Id
let myCurrentBuildingId = ref(0);
let myCurrentFloorId = ref(0);
//当前当前楼层Id

//获取楼栋数据

let BuildingData = reactive([]);
let myCurrentBuilding = ref('查找中');


//当前楼层数据
let myCurrentFloor = ref('无数据');

//所有楼层数据
let tableData = reactive([]);

//所有的教室数据
let LaboratoryData = reactive([]);

//获取所有楼栋方法
async function getDataList() {
    let resultData = []

    //楼栋数据请求
    service.get("/Building/getAllBuilding").then(
        async (res) => {
            BuildingData.push(...res.value)
            if (BuildingData.length > 0) {
                myCurrentBuilding.value = BuildingData[0].name;
                myCurrentBuildingId.value = BuildingData[0].id;
            }

        }
    )

    //获取第一栋教学楼楼层
    await service.get("/Floor/getAllFloor?buildingId=" + 1).then(
        (res) => {
            resultData.length = 0;
            resultData.push(...res.value)

        })

    if (resultData[0] != null) {
        myCurrentFloor.value = resultData[0].name;
        myCurrentFloorId.value = resultData[0].id;
        //拿到第一层的所有实验室
        await service.get("Laboratory/getAllLaboratory?floorid=" + resultData[0].id).then(
            (res) => {
                LaboratoryData.length = 0;
                LaboratoryData.push(...res.value)

            })
    }
    else {
        myCurrentFloor.value = '无数据';
        LaboratoryData.length = 0;
    }
    return resultData
}


//搜索
let searchStr = ref('')
const filterTableData = computed(() =>
    LaboratoryData.filter(
        (data) =>
            !searchStr.value ||
            data.name.toLowerCase().includes(searchStr.value.toLowerCase())
    )
)


//添加/编辑
let currentBuilding = reactive({});
let dialogVisible = ref(false);
let dialogKey = ref(0);
async function ClickAdd() {
    addForLB.value = 1;
    console.log('添加教室..........');
    dialogVisible.value = true;
    // 更新 key 的值来销毁旧的组件实例并创建新的
    dialogKey.value += 1;
}
async function ClickEdit(index, row) {


    addForLB.value = 0;

    //将当前楼栋楼层和楼栋楼层名字id传入子组件
    currentBuilding.row = row;
    currentBuilding.building = myCurrentBuilding.value;
    currentBuilding.buildingId = myCurrentBuildingId.value;
    currentBuilding.floor = myCurrentFloor.value;
    currentBuilding.floorId = myCurrentFloorId.value;


    console.log('编辑教室............');
    console.log(currentBuilding);
    dialogVisible.value = true;
    // 更新 key 的值来销毁旧的组件实例并创建新的
    dialogKey.value += 1;
}
async function Close() {
    dialogVisible.value = false;
    Reload();
}

//更改楼栋
async function changeBuilding(id, name) {
    myCurrentBuilding.value = name;
    myCurrentBuildingId.value = id;

    //获取选择的教学楼楼层
    await service.get("/Floor/getAllFloor?buildingId=" + id).then(
        (res) => {
            // 清空 tableData
            tableData.length = 0;
            tableData.push(...res.value)
        })

    if (tableData[0] != null) {
        myCurrentFloor.value = tableData[0].name;
        myCurrentFloorId.value = tableData[0].id;
        //拿到第一层的所有实验室
        await service.get("Laboratory/getAllLaboratory?floorid=" + tableData[0].id).then(
            (res) => {
                LaboratoryData.length = 0;
                LaboratoryData.push(...res.value)

            })
    }
    else {
        myCurrentFloor.value = '无数据';
        LaboratoryData.length = 0;
    }
}


//更改楼 层
async function changeFloor(id, name) {
    myCurrentFloor.value = name;
    myCurrentFloorId.value = id;


    //拿到第一层的所有实验室
    await service.get("Laboratory/getAllLaboratory?floorid=" + id).then(
        (res) => {
            LaboratoryData.length = 0;
            LaboratoryData.push(...res.value)

        })
}

//删除
async function ClickDelete(index, row) {
    await ElMessageBox.confirm(
        '你确定要这么做吗，这样做将无法撤回?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        service.delete("/Laboratory/deleteLaboratory?labId=" + row.id).then(
            async res => {
                ShowTip(true, '删除成功')
                await Reload()
            },
            error => {
                ShowTip(false, '删除失败')
            }
        )
    }).catch(() => {
        ShowTip(false, '取消删除')
    })
}


async function Reload() {
    tableData.length = 0
    tableData.push(...await getDataList())
}

onBeforeMount(async () => {
    await Reload()
})


</script>

<style scoped>
.el-radio {
    margin-top: 10px;
    width: 250px;
}

.buttonBox {
    float: left;
    height: 40px;
    padding-top: 10px;
    margin-left: 20px;
}

.searchInput,
.addInput {
    width: 200px;
}

.searchButton,
.addButton {
    margin-left: 10px;
}

.ddlist {
    margin-right: 100px;
    margin-left: 10px;
}
</style>